<!--
* @author wn
* @date 2023/09/06 10:46:03
* @description: 服务说明 组件
!-->
<template>
	<view class="service-panel">
		<!-- 关闭按钮 -->
		<text class="close icon-close" @tap="$emit('close')"></text>
		<!-- 标题 -->
		<view class="title">服务说明</view>
		<!-- 内容 -->
		<view class="item">
			<view class="dt">无忧退货</view>
			<view class="dd">
				自收到商品之日起30天内,可在线申请无忧退货服务（食品等特殊商品除外）
			</view>
		</view>
		<view class="item">
			<view class="dt">快速退款</view>
			<view class="dd">
				收到退货包裹并确认无误后,将在48小时内办理退款,
				退款将原路返回,不同银行处理时间不同,预计1-5个工作日到账
			</view>
		</view>
		<view class="item">
			<view class="dt">满88元免邮费</view>
			<view class="dd">
				单笔订单金额(不含运费)满88元可免邮费,不满88元,单笔订单收取10元邮费
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
defineEmits<{ (e: 'close'): void }>()
</script>
<style lang="scss">
.service-panel {
	position: relative;
	padding: 0 30rpx;
	border-radius: 10rpx 10rpx 0 0;
	background-color: #fff;
	.title {
		line-height: 1;
		padding: 40rpx 0;
		text-align: center;
		font-size: 32rpx;
		border-bottom: 1rpx solid #ddd;
		color: #444;
	}

	.close {
		position: absolute;
		right: 24rpx;
		top: 24rpx;
	}

	.item {
		margin: 20rpx 20rpx 0;
		&:last-child {
			margin-bottom: 80rpx;
		}
	}
	.dt {
		position: relative;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #333;

		&::before {
			position: absolute;
			top: 50%;
			left: -20rpx;
			content: '';
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #eaeaea;
			transform: translateY(-50%);
		}
	}

	.dd {
		line-height: 1.6;
		font-size: 26rpx;
		color: #999;
	}
}
</style>
